<template>
	<view class="outside">
		<scroll-view scroll-y="true" class="content" style="background: #eee;">
			<view class="header">
				<image :src="activity.img" mode="widthFix"></image>
				<view class="text"><text>{{activity.title}}</text></view>
				<view v-if="true" class="row">
					<view class="key">活动时间：</view>
					<view class="value"><text>{{activity.startDate}}</text></view>
				</view>
				<view v-if="true" class="row">
					<view class="key">活动地点：</view>
					<view class="value"><text>{{activity.location}}</text></view>
				</view>
			</view>
			<view class="detail">
				<view style="padding: 0 40rpx 140rpx 40rpx;">
				<rich-text :nodes="activity.html"></rich-text>
				</view>
				<!-- <view v-for="(item,index) in dataList" :style="index==dataList.length-1?'padding-bottom:100rpx;':''">
					<secTitle v-if="item.type==0" class="title" :title="item.data" color="#b9ac90" textColor="#b9ac90"
						:showMore="false">
					</secTitle>
					<view v-if="item.type==1" class="text">
						<text>{{item.data}}</text>
					</view>
					<image v-if="item.type==2" :src="item.data" mode="widthFix"></image>
				</view> -->
			</view>
		</scroll-view>
		<view class="btn" @click="handlerClick" v-if="activity.id!='887729490560548864'">
			<button>参加活动</button>
		</view>
		<image class="top-btn" src="../../static/icon_backtotop@2x.png" @click="toTop"></image>
	</view>
</template>

<script>
	import secTitle from '../customer/secTitle.vue'
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import HTMLParser from '../../js_sdk/parse-html/html-parser.js'
	export default {
		components: {
			secTitle
		},
		data() {
			return {
				id: 0,
				activity: undefined
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getAct(e.id)
		},
		onShow() {
			if (uni.getStorageSync('toMineOrderList')) {
				uni.setStorageSync('toMineOrderList', false)
				uni.navigateTo({
					url: '../mine/myOrderList?index=' + uni.getStorageSync('toMineOrderList')
				})
			}
		},
		methods: {
			parse(str) {
				let list = new HTMLParser(str)
				return list
			},
			getAct(id) {
				doGet('/blade-museum/act/getOne?id=' + id, (res) => {
					res.startDate = dateToString(new Date(res.startTime.replace(/-/g,'/')),'yyyy年MM月dd日')
					res.html = this.parse(res.content)
					this.activity = res
				}, (err) => {})
			},
			handlerClick() {
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: "../index/index"
					})
					return
				}
				let params = {
					id: this.activity.id,
					date: new Date(this.activity.startTime.replace(/-/g,'/')).getTime(),
					type: this.activity.typeCode,
				}
				uni.navigateTo({
					url: "../order/order2?params=" + encodeURIComponent(JSON.stringify(params))
				})
			},
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				})
			}
		}
	}
</script>

<style>
	.outside {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		/* position: relative; */
	}

	.content {
		/* padding: 20rpx; */
		width: 100%;
		/* height: calc(100% - 800rpx); */
	}

	.btn {
		position: fixed;
		height: 100rpx;
		bottom: 0rpx;
		left: 0rpx;
		/* width: calc(100% - 40rpx); */
		width: 100%;
		/* z-index: 10; */
	}

	.btn button {
		width: 100%;
		height: 100%;
		color: #fff;
		border: 0;
		font-size: 32rpx;
		line-height: 100rpx;
		border-radius: 0;
		background: #B9AC90;
	}

	.header {
		background: #ffffff99;
		padding-bottom: 30rpx;
	}

	.header image {
		margin: 30rpx 20rpx;
		width: calc(100% - 40rpx);
		border-radius: 5rpx;
		height: auto;
	}

	.header .text {
		font-weight: bolder;
		height: auto;
		max-height: 80rpx;
		line-height: 40rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
		text-align: left;
		width: calc(100% - 40rpx);
		/* max-width: 400rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.infomation {
		/* background: #fff; */
		margin-top: 40rpx;
		padding: 20rpx 0;
	}

	.title {
		/* padding: 20rpx; */
	}

	.row {
		width: calc(100% - 40rpx);
		height: auto;
		display: flex;
		padding: 15rpx 40rpx 0 40rpx;
	}

	.key {
		height: 32rpx;
		line-height: 32rpx;
		font-size: 26rpx;
		color: #666;
	}

	.value {
		height: 32rpx;
		color: #999;
		line-height: 32rpx;
	}

	.value text {
		font-size: 26rpx;
	}

	.detail {
		padding: 40rpx 0 20rpx 0;
		background: #eee;
	}

	.detail .title {
		width: calc(100% - 80rpx);
		padding: 0 20rpx;
	}

	.detail .text {
		margin: 20rpx 40rpx;
		text-align: justify;
		text-indent: 2em;
		line-height: 50rpx;
		font-size: 28rpx;
		color: #333;
	}

	.detail image {
		margin: 10rpx 20rpx;
		width: calc(100% - 40rpx);
	}

	.top-btn {
		position: fixed;
		height: 120rpx;
		width: 120rpx;
		bottom: 120rpx;
		right: 0rpx;
	}
</style>
